<template>
<div class="design-item-list" :class="{heightLight : current == spaceForm.itemId}">
	<div class="design-space" :style="{height: spaceForm.num+'px'}"></div>
	<div class="design-edit" v-show="(current == spaceForm.itemId) && spaceForm.toolbarEdit && !spaceForm.toolbarComponents">
		<h4 class="edit-title"><span>辅助空白</span></h4>
		<el-form :model="spaceForm" ref="spaceForm" label-width="80px" class="demo-headerForm">
			<el-form-item label="空白高度">
				<div class="block" style="margin-left: 5px;">
					<el-slider v-model="spaceForm.num" @change="changeStatus(spaceForm)"></el-slider>
				</div>
			</el-form-item>
		</el-form>
	</div>
</div>
</template>
<script>
export default {
    data () {
        return {}
    },
    props:{
		spaceForm: {
			type: Object,
			default() {
				return {}
			}
		},
		current: String
    },
    created(){},
	methods:{
		changeStatus(form){
			this.$emit("childChange",form);
		},
	},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
@import "../../../../static/css/style.less";
@import "../../../../static/css/element.less";
</style>